<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="Shortcut Icon" href="../images/aecc.ico" type="image/x-icon" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="../StaticFiles/element-ui/element-ui.css">
  <link rel="stylesheet" href="../StaticFiles/nprogress/nprogress.min.css">
  <link rel="stylesheet" href="../styles/vue-page-common.css">
  <script src="../Scripts/vue.min.js"></script>
  <script src="../StaticFiles/element-ui/element-ui.js"></script>
  <script src="../Scripts/axios.min.js"></script>
  <script src="../StaticFiles/nprogress/nprogress.min.js"></script>
  <script src="../Scripts/crypto-js.js"></script>
  <script src="../Scripts/secret.js"></script>
  <script src="../Scripts/dayjs.min.js"></script>
  <script src="../Scripts/axios.config.js"></script>
  <script src="../Scripts/datav.min.vue.js"></script>
  <script src="../Scripts/lodash.min.js"></script>
  <title>AEOS指标维护</title>
  <style>
    /* 表单校验成功反馈图标 */
    .el-icon-circle-check {
      color: #67c23a;
    }

    #grid .el-empty {
      padding: 0;
    }

    #grid .el-empty__description {
      margin-top: 0;
    }
  </style>
</head>

<body>
  <div id="app" v-cloak v-on:keyup.enter="getData">
    <!-- 报表标题 -->
    <vue2-report-header :title="queryInfo.factoryname+'AEOS指标维护'"></vue2-report-header>
    <div style="padding:10px;">
      <!-- 查询条件区 -->
      <el-form :inline="true" :model="queryInfo" ref="queryInfoRef" style="margin: 10px" :label-position="'left'"
        :disabled="formDisabled">
        <el-form-item label="年月:" prop="selectdate">
          <el-date-picker v-model="queryInfo.yearmonth" type="month" value-format="yyyy-MM"></el-date-picker>
        </el-form-item>

        <el-form-item label="类型:">
          <el-select v-model="queryInfo.sqcdptype" placeholder="请选择" clearable>
            <el-option v-for="item in sqcdpList" :key="item.value" :label="item.value" :value="item.value">
              <span style="float: left">{{ item.value }}</span>
              <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label}}</span>
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="指标名称:">
          <el-input v-model.trim="queryInfo.itemname" placeholder="请选择"></el-input>
        </el-form-item>

        <el-form-item label="组织结构:">
          <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
            v-model="queryInfo.selectOrg" clearable style="width:340px;">
          </el-cascader>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>
          <el-button type="success" icon="el-icon-circle-plus-outline" size="small" @click="showAddDialog">添加
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 表格显示区 -->
      <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
        element-loading-background="rgba(0,0,0,0.8)" :data="dataList" stripe border>
        <el-table-column type="index" width="50"></el-table-column>
        <el-table-column label="操作" width="250">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="添加指标每日执行情况" placement="top-start">
              <el-button type="success" icon="el-icon-circle-plus-outline" v-if="scope.row.disabled !== '1'"
                @click="showAddDetailDialog(scope.row)" size="mini">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="查看指标每日执行情况" placement="top-start">
              <el-button type="primary" icon="el-icon-search" size="mini" v-if="scope.row.disabled !== '1'"
                @click="showItemDetailsDialog(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
              <el-button type="warning" icon="el-icon-edit" size="mini" @click="showUpdateDialog(scope.row)">
              </el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteData(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="唯一id" prop="id" width="100" v-if="false"></el-table-column>
        <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="指标类型" prop="sqcdptype" width="100" show-overflow-tooltip sortable>
          <template slot-scope="scope">
            <el-tag>
              {{scope.row.sqcdptype}}
              <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
              <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
              <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
              <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
              <span v-else>(人员)</span>
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="指标名称" prop="itemname" width="200" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="指标描述" prop="itemnotes" show-overflow-tooltip></el-table-column>
        <el-table-column label="组织结构" prop="orginfo" width="240" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip sortable>
          <template slot-scope="scope">
            <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
            <span v-else>{{scope.row.threshold}}</span>
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip sortable></el-table-column>
        <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip></el-table-column>
        <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
        <el-table-column label="启用状态" prop="status" width="100">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-text="启用" inactive-text="" @change="changeStatus(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip></el-table-column>
        <el-table-column label="修改时间" prop="lastchangedate" width="100" :formatter="splitDate"></el-table-column>
      </el-table>

      <!-- 新增指标 -->
      <el-dialog title="新增指标" :visible.sync="addItemObj.addDialogVisable" width="50%" @close="addDialogClosed">
        <el-form :model="addItemObj.addForm" :rules="addItemObj.addFormRule" ref="addFormRef" lable-width="100px"
          :label-position="'top'" :inline="true">
          <div>
            <el-form-item label="年月:" prop="yearmonth">
              <el-date-picker placeholder="请选择" v-model="addItemObj.addForm.yearmonth" type="month"
                value-format="yyyy-MM"></el-date-picker>
            </el-form-item>

            <el-form-item label="类型:" prop="sqcdptype">
              <el-select v-model="addItemObj.addForm.sqcdptype" placeholder="请选择" clearable>
                <el-option v-for="item in sqcdpList" :key="item.value" :label="item.value" :value="item.value">
                  <span style="float: left">{{ item.value }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="指标名称:" prop="itemname">
              <el-input v-model.trim="addItemObj.addForm.itemname" placeholder="请输入" clearable style="width: 300px;">
              </el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="指标描述:">
              <el-input v-model.trim="addItemObj.addForm.itemnotes" placeholder="请输入内容" style="width: 765px;" clearable>
              </el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="组织结构:" prop="selectOrg">
              <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
                v-model="addItemObj.addForm.selectOrg" clearable style="width:340px;">
              </el-cascader>
            </el-form-item>

            <el-form-item label="单位:" prop="unit">
              <el-select v-model="addItemObj.addForm.unit" placeholder="请选择" clearable style="width: 120px;">
                <el-option v-for="item in unitList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="超值判断:" prop="determine">
              <el-select v-model="addItemObj.addForm.determine" style="width: 80px;">
                <el-option :key="'大于'" :label="'大于'" :value="'大于'"></el-option>
                <el-option :key="'小于'" :label="'小于'" :value="'小于'"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="阈值:" prop="threshold">
              <el-input-number v-model="addItemObj.addForm.threshold" :precision="2" :step="0.1" :max="100" :min="0">
              </el-input-number>
            </el-form-item>
          </div>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addItemObj.addDialogVisable = false">取 消</el-button>
          <el-button type="primary" @click="addBtnConfirm" :loading="addItemObj.loading">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改指标 -->
      <el-dialog title="修改指标" :visible.sync="updateItemObj.updateDialogVisable" width="50%">
        <el-form :model="updateItemObj.updateForm" :rules="updateItemObj.updateFormRule" ref="updateFormRef"
          lable-width="100px" :label-position="'top'" :inline="true">
          <div>
            <el-form-item label="年月:" prop="yearmonth">
              <el-date-picker placeholder="请选择" v-model="updateItemObj.updateForm.yearmonth" type="month"
                value-format="yyyy-MM"></el-date-picker>
            </el-form-item>

            <el-form-item label="类型:" prop="sqcdptype">
              <el-select v-model="updateItemObj.updateForm.sqcdptype" placeholder="请选择" clearable>
                <el-option v-for="item in sqcdpList" :key="item.value" :label="item.value" :value="item.value">
                  <span style="float: left">{{ item.value }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{ item.label }}</span>
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="指标名称:" prop="itemname">
              <el-input v-model.trim="updateItemObj.updateForm.itemname" placeholder="请输入" clearable
                style="width: 300px;">
              </el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="指标描述:">
              <el-input v-model.trim="updateItemObj.updateForm.itemnotes" placeholder="请输入内容" style="width: 765px;"
                clearable>
              </el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="组织结构:" prop="selectOrg">
              <el-cascader :options="orginazition" :props="{ checkStrictly: true}" ref="orginazitionRef"
                v-model="updateItemObj.updateForm.selectOrg" clearable style="width:340px;">
              </el-cascader>
            </el-form-item>

            <el-form-item label="单位:" prop="unit">
              <el-select v-model="updateItemObj.updateForm.unit" placeholder="请选择" clearable style="width: 100px;">
                <el-option v-for="item in unitList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="超值判断:" prop="determine">
              <el-select v-model="updateItemObj.updateForm.determine" style="width: 100px;">
                <el-option :key="'大于'" :label="'大于'" :value="'大于'"></el-option>
                <el-option :key="'小于'" :label="'小于'" :value="'小于'"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="阈值:" prop="threshold">
              <el-input-number v-model="updateItemObj.updateForm.threshold" :precision="2" :step="0.1" :max="100"
                :min="0">
              </el-input-number>
            </el-form-item>
          </div>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateItemObj.updateDialogVisable = false">取 消</el-button>
          <el-button type="primary" @click="updateBtnConfirm" :loading="updateItemObj.loading">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 添加指标每日执行情况 -->
      <el-dialog title="添加指标每日执行情况" :visible.sync="addDetailObj.addDetailDialogVisable" width="50%"
        @close="addDetailDialogClosed">
        <el-form :model="addDetailObj.addDetailForm" :rules="addDetailObj.addDetailFormRule" ref="addDetailFormRef"
          lable-width="100px" :label-position="'top'" :inline="true">
          <div>
            <el-form-item label="年月:">
              <el-input v-model="addDetailObj.itemInfoObj.yearmonth" :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="类型:">
              <el-input v-model="addDetailObj.itemInfoObj.sqcdptype" :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="指标项:">
              <el-input v-model="addDetailObj.itemInfoObj.itemname" :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="指标项id:">
              <el-input v-model="addDetailObj.addDetailForm.id" :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="组织结构:">
              <el-input v-model="addDetailObj.itemInfoObj.orginfo" :disabled="true" style="width: 274px;">
              </el-input>
            </el-form-item>

            <el-form-item label="单位:">
              <el-input v-model="addDetailObj.itemInfoObj.unit" :disabled="true" style="width: 100px;">
              </el-input>
            </el-form-item>

            <el-form-item label="超值判断:">
              <el-select v-model="addDetailObj.itemInfoObj.determine" :disabled="true" style="width: 100px;">
                <el-option :key="'大于'" :label="'大于'" :value="'大于'"></el-option>
                <el-option :key="'小于'" :label="'小于'" :value="'小于'"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="阈值:">
              <el-input v-model="addDetailObj.itemInfoObj.threshold" :disabled="true" style="width: 100px;">
              </el-input>
            </el-form-item>

            <el-form-item label="时间:" prop="createdate">
              <el-date-picker placeholder="请选择" v-model="addDetailObj.addDetailForm.createdate"
                :disabled="addDetailObj.disabled" value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>
          </div>

          <div>
            <el-form-item label="问题描述:" prop="description">
              <el-input v-model.trim="addDetailObj.addDetailForm.description" placeholder="请输入内容" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="整改措施:" prop="improvemeasures">
              <el-input v-model.trim="addDetailObj.addDetailForm.improvemeasures" placeholder="请输入内容" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="要求整改时间:" prop="needfinishdate">
              <el-date-picker placeholder="请选择" v-model="addDetailObj.addDetailForm.needfinishdate"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="完成时间:" prop="finishdate">
              <el-date-picker placeholder="请选择" v-model="addDetailObj.addDetailForm.finishdate"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="当前进度:" prop="schedule">
              <el-select v-model="addDetailObj.addDetailForm.schedule" placeholder="请选择" clearable>
                <el-option v-for="item in scheduleList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="责任人:" prop="dealemployee">
              <el-input v-model.trim="addDetailObj.addDetailForm.dealemployee" placeholder="请输入" clearable></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item prop='containername' label="流水卡号:">
              <el-autocomplete v-model.trim="addDetailObj.addDetailForm.containername" placeholder="请输入流水卡号"
                :trigger-on-focus="false" :fetch-suggestions="searchContainerAsync" :value-key="'containername'"
                :debounce="500" style="width: 682px;">
              </el-autocomplete>
            </el-form-item>
          </div>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDetailObj.addDetailDialogVisable = false">取 消</el-button>
          <el-button type="primary" @click="addDetailBtnConfirm" :loading="addDetailObj.loading">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 指标每日执行情况--明细表格 -->
      <el-dialog :title="itemDetails.title" :visible.sync="itemDetails.dialogVisiable" width="98%" :top="'10px'"
        :center="'center'">
        <el-table v-loading="loading" v-loading.fullscreen.lock="loading" :element-loading-text="loadingText"
          element-loading-background="rgba(0,0,0,0.8)" :data="itemDetails.dataList" stripe border>
          <el-table-column type="index" width="50"></el-table-column>
          <el-table-column label="操作" width="130">
            <template slot-scope="scope">
              <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                <el-button type="warning" icon="el-icon-edit" size="mini" @click="showUpdateDetailDialog(scope.row)">
                </el-button>
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="deleteItemDetail(scope.row)">
                </el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <el-table-column label="唯一id" prop="id" width="100" v-if="false"></el-table-column>
          <el-table-column label="父id" prop="rbaeositemid" width="100" v-if="false"></el-table-column>
          <el-table-column label="年月" prop="yearmonth" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="指标类型" prop="sqcdptype" width="90" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag>
                {{scope.row.sqcdptype}}
                <span v-if="scope.row.sqcdptype === 'S'">(安全)</span>
                <span v-else-if="scope.row.sqcdptype === 'Q'">(质量)</span>
                <span v-else-if="scope.row.sqcdptype === 'C'">(成本)</span>
                <span v-else-if="scope.row.sqcdptype === 'D'">(交付)</span>
                <span v-else>(人员)</span>
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="指标名称" prop="itemname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="阈值" prop="threshold" width="80" show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.unit === '百分比'">{{scope.row.threshold}}%</span>
              <span v-else>{{scope.row.threshold}}</span>
            </template>
          </el-table-column>
          <el-table-column label="单位" prop="unit" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="超值判断" prop="determine" width="80" show-overflow-tooltip></el-table-column>
          <el-table-column label="问题描述" prop="description" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="整改措施" prop="improvemeasures" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="要求整改时间" prop="needfinishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="完成时间" prop="finishdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="当前进度" prop="schedule" width="80" show-overflow-tooltip>
            <template slot-scope="scope" v-if="scope.row.schedule">
              <span>{{scope.row.schedule}}%</span>
            </template>
          </el-table-column>
          <el-table-column label="责任人" prop="dealemployee" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="批次号" prop="containername" show-overflow-tooltip></el-table-column>
          <el-table-column label="工序" prop="workflowstepname" width="100" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建人" prop="creater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="创建时间" prop="createdate" width="100" :formatter="splitDate"></el-table-column>
          <el-table-column label="修改人" prop="updater" width="70" show-overflow-tooltip></el-table-column>
          <el-table-column label="修改时间" prop="lastchangedate" width="100" :formatter="splitDate"></el-table-column>
        </el-table>
      </el-dialog>

      <!-- 修改每日执行情况 -->
      <el-dialog title="修改每日执行情况" :visible.sync="updateDetailObj.updateDetailDialogVisable" width="50%">
        <el-form :model="updateDetailObj.updateDetailForm" lable-width="100px" :label-position="'top'" :inline="true"
          :rules="updateDetailObj.updateDetailFormRule" ref="updateDetailFormRef">
          <div>
            <el-form-item label="唯一id:">
              <el-input v-model="updateDetailObj.updateDetailForm.id" :disabled="true">
              </el-input>
            </el-form-item>

            <el-form-item label="问题描述:" prop="description">
              <el-input v-model.trim="updateDetailObj.updateDetailForm.description" placeholder="请输入内容" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="整改措施:" prop="improvemeasures">
              <el-input v-model.trim="updateDetailObj.updateDetailForm.improvemeasures" placeholder="请输入内容" clearable>
              </el-input>
            </el-form-item>

            <el-form-item label="要求整改时间:" prop="needfinishdate">
              <el-date-picker placeholder="请选择" v-model="updateDetailObj.updateDetailForm.needfinishdate"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="完成时间:" prop="finishdate">
              <el-date-picker placeholder="请选择" v-model="updateDetailObj.updateDetailForm.finishdate"
                value-format="yyyy-MM-dd">
              </el-date-picker>
            </el-form-item>

            <el-form-item label="当前进度:" prop="schedule">
              <el-select v-model="updateDetailObj.updateDetailForm.schedule" placeholder="请选择" clearable
                style="width: 100px;">
                <el-option v-for="item in scheduleList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="责任人:" prop="dealemployee">
              <el-input v-model.trim="updateDetailObj.updateDetailForm.dealemployee" placeholder="请输入" clearable
                style="width: 152px;"></el-input>
            </el-form-item>
          </div>

          <div>
            <el-form-item prop='containername' label="流水卡号:">
              <el-autocomplete v-model.trim="updateDetailObj.updateDetailForm.containername" placeholder="请输入流水卡号"
                :trigger-on-focus="false" :fetch-suggestions="searchContainerAsync" :value-key="'containername'"
                :debounce="500" style="width: 500px;">
              </el-autocomplete>
            </el-form-item>
          </div>
        </el-form>
        <!-- 弹出窗底下按钮 -->
        <span slot="footer" class="dialog-footer">
          <el-button @click="updateDetailObj.updateDetailDialogVisable = false">取 消</el-button>
          <el-button type="primary" @click="updateDetailBtnConfirm" :loading="updateDetailObj.loading">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分页组件 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.currentPage" :page-sizes="[12,50,100]" :page-size="queryInfo.pageSize"
        layout="prev,pager,next,jumper,sizes,total" :total="total">
      </el-pagination>

      <!-- 回到顶部 -->
      <el-backtop></el-backtop>
    </div>
  </div>

  <script type="module">
    import { getParams, fetchSuggestion, getUserWhiteList, exportExcelData } from '../Scripts/hooks/useCommonMethod.js'
    import { splitDate } from '../Scripts/hooks/format.js'
    import Vue2ReportHeader from '../Scripts/components/Vue2ReportHeader.js'
    const app = new Vue({
      el: '#app',
      components: { Vue2ReportHeader },
      data: {
        splitDate,
        total: 0,
        loading: false,
        loadingText: '数据加载中...',
        dataList: [],
        superAdminList: [],
        queryInfo: {
          factoryid: '',
          factoryname: '',
          yearmonth: '',//年月
          sqcdptype: '',//sqcdp类型
          itemname: '',//指标名称
          selectOrg: [],//组织结构
          currentPage: 1,//当前页
          pageSize: 13//每页显示条数
        },
        sqcdpList: [
          { value: 'S', label: '安全' },
          { value: 'Q', label: '质量' },
          { value: 'C', label: '成本' },
          { value: 'D', label: '交付' },
          { value: 'P', label: '人员' }
        ],
        unitList: [
          { value: '次', label: '次' },
          { value: '个', label: '个' },
          { value: '条', label: '条' },
          { value: '批', label: '批' },
          { value: '百分比', label: '百分比' }
        ],
        scheduleList: [
          { value: 0, label: '0%' },
          { value: 25, label: '25%' },
          { value: 50, label: '50%' },
          { value: 75, label: '75%' },
          { value: 100, label: '100%' }
        ],
        orginazition: [],//组织结构
        addItemObj: {
          addDialogVisable: false,
          loading: false,
          addForm: {
            yearmonth: '', sqcdptype: '', itemname: '', itemnotes: '',
            selectOrg: '', unit: '', threshold: '',
            determine: '大于', employeeid: getParams("uid")
          },
          addFormRule: {
            yearmonth: [{ required: true, message: '年月不能为空', trigger: 'blur' }],
            selectOrg: [{ required: true, message: '组织不能为空', trigger: 'change' }],
            sqcdptype: [{ required: true, message: '类型不能为空', trigger: 'change' }],
            itemname: [{ required: true, message: '指标名称不能为空', trigger: 'change' }],
            unit: [{ required: true, message: '单位不能为空', trigger: 'change' }],
            threshold: [{ required: true, message: '阈值不能为空', trigger: 'change' }],
            determine: [{ required: true, message: '超值判断不能为空', trigger: 'change' }]
          }
        },
        updateItemObj: {
          updateDialogVisable: false,
          loading: false,
          updateForm: { id: '', yearmonth: '', sqcdptype: '', itemname: '', itemnotes: '', selectOrg: '', unit: '', threshold: '', determine: '', employeeid: getParams("uid") },
          updateFormRule: {
            yearmonth: [{ required: true, message: '年月不能为空', trigger: 'blur' }],
            selectOrg: [{ required: true, message: '组织不能为空', trigger: 'change' }],
            sqcdptype: [{ required: true, message: '类型不能为空', trigger: 'change' }],
            itemname: [{ required: true, message: '指标名称不能为空', trigger: 'change' }],
            unit: [{ required: true, message: '单位不能为空', trigger: 'change' }],
            threshold: [{ required: true, message: '阈值不能为空', trigger: 'change' }],
            determine: [{ required: true, message: '超值判断不能为空', trigger: 'change' }]
          }
        },
        // 指标每日执行情况--维护
        addDetailObj: {
          addDetailDialogVisable: false,
          loading: false,
          disabled: true,
          itemInfoObj: {
            itemname: '',//指标项
            yearmonth: '',//年月
            sqcdptype: '',//sqcdp类型
            orginfo: '',//组织结构
            unit: '',//单位
            threshold: '',//阈值
            determine: '' //超值判断
          },
          addDetailForm: {
            id: '',
            description: '',//问题描述
            improvemeasures: '',//整改措施
            needfinishdate: '',//要求整改时间
            finishdate: '',//完成时间
            schedule: '',//当前进度
            dealemployee: '',//责任人
            createemployee: '',//创建人
            containername: '',//流水卡号
            createdate: ''//创建时间
          },
          addDetailFormRule: {
            createdate: [{ required: true, message: '时间不能为空', trigger: 'blur' }],
            // description: [{ required: true, message: '问题描述不能为空', trigger: 'change' }],
            // improvemeasures: [{ required: true, message: '整改措施不能为空', trigger: 'change' }],
            // needfinishdate: [{ required: true, message: '要求整改时间不能为空', trigger: 'change' }],
            // schedule: [{ required: true, message: '当前进度不能为空', trigger: 'change' }],
            // dealemployee: [{ required: true, message: '责任人不能为空', trigger: 'change' }]
          }
        },
        // 指标每日执行情况--明细
        itemDetails: {
          dialogVisiable: false,
          dataList: [],
          title: '',
          id: ''
        },
        // 指标每日执行情况--更新
        updateDetailObj: {
          updateDetailDialogVisable: false,
          loading: false,
          updateDetailForm: {
            id: '',
            description: '',//问题描述
            improvemeasures: '',//整改措施
            needfinishdate: '',//要求整改时间
            finishdate: '',//完成时间
            schedule: '',//当前进度
            dealemployee: '',//责任人
            containername: ''//流水卡号
          },
          updateDetailFormRule: {
            // description: [{ required: true, message: '问题描述不能为空', trigger: 'change' }],
            // improvemeasures: [{ required: true, message: '整改措施不能为空', trigger: 'change' }],
            // needfinishdate: [{ required: true, message: '要求整改时间不能为空', trigger: 'change' }],
            // schedule: [{ required: true, message: '当前进度不能为空', trigger: 'change' }],
            // dealemployee: [{ required: true, message: '责任人不能为空', trigger: 'change' }]
          }
        },
        formDisabled: false
      },
      methods: {
        // 查询批次号
        searchContainerAsync(value, callback) {
          fetchSuggestion({ actionName: 'getContainernameAsync', name: 'containername', value, callback })
        },
        // 查询信息中心管理员
        async getSuperAdminUsers() {
          const { data: { data, meta, total } } = await axios({
            method: 'POST',
            url: '../handler/report/FeedbackTypeMaint.ashx?action=getSuperAdmin',
            data: { type: 'getSuperAdmin' }
          });
          for (const i of data) {
            this.superAdminList.push(i.employeeid);
          }
          const employeeid = getParams("uid");
          if (this.superAdminList.indexOf(employeeid) > -1) { this.addDetailObj.disabled = false }
        },
        // 查询url分厂信息
        async getFactoryInfo() {
          const { data: { data, meta, total } } = await axios({
            url: '../handler/report/CommonActionHandle.ashx?actions=getFactoryInfo',
            method: 'post',
            data: { type: 'getFactoryInfo', factoryid: Decrypt(getParams('factoryid')), isMapping: '是' }
          })
          const { factoryid, factoryname } = data[0];
          this.queryInfo.factoryname = factoryname;
          this.queryInfo.factoryid = factoryid;
          document.title = factoryname + 'AEOS指标维护';
        },
        // 获取组织结构
        async getOrginazition() {
          const { data: { data, meta, total } } = await axios.post('../handler/report/CommonActionHandle.ashx?action=getMESOrginazition', {
            type: 'getMESOrginazition',
            isMapping: '是',
            factoryCode: '602'
          })
          this.orginazition = data;
        },
        // 查询
        async getData() {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/report/RbAEOSItemMaint.ashx?action=getData', {
            type: 'getData',
            ...this.queryInfo
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.dataList = data.map(item => {
            return { ...item, status: item.status === 1 }; //将【启用状态】由字符串变更为布尔值
          })
          this.total = total;
        },
        // 新增弹窗--打开
        showAddDialog() {
          this.addItemObj.addDialogVisable = true;
        },
        // 新增弹窗关闭后
        addDialogClosed() {
          this.addItemObj.addForm = {
            yearmonth: '', sqcdptype: '', itemname: '', itemnotes: '',
            selectOrg: '', unit: '', threshold: '', determine: '大于', employeeid: getParams("uid")
          };
          this.$refs['addFormRef'].resetFields();
        },
        // 检查待保存数据是否已存在
        async checkIsExist(row) {
          const { data: { data, meta, total } } = await axios({
            method: 'POST',
            url: '../handler/report/RbAEOSItemMaint.ashx?action=checkIsExist',
            data: { type: 'checkIsExist', ...row }
          })
          return total > 0;
        },
        // 新增弹窗[确认]按钮点击
        addBtnConfirm() {
          this.$refs['addFormRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              const { sqcdptype, unit, determine, itemname, selectOrg } = this.addItemObj.addForm;
              if (sqcdptype === 'P') {
                if (unit !== '百分比') {
                  return this.$message.error('类型为【P】时，【单位】只能选择【百分比】');
                }
                if (determine !== '小于') {
                  return this.$message.error('类型为【P】时，【超值判断】只能选择【小于】');
                }
              }

              if (sqcdptype === 'D' && unit !== '百分比') {
                return this.$message.error('类型为【D】时，【单位】只能选择【百分比】');
              }

              if (sqcdptype === 'Q' && itemname.indexOf('率') > -1 && unit !== '百分比') {
                return this.$message.error(`指标【${itemname}】的【单位】只能选择【百分比】`);
              }

              if (sqcdptype === 'C' && unit === '百分比') {
                return this.$message.error(`指标【C】的【单位】不能选择【百分比】`);
              }

              if (sqcdptype === 'S' && itemname.indexOf('率') > -1 && unit !== '百分比') {
                return this.$message.error(`指标【${itemname}】的【单位】只能选择【百分比】`);
              }

              if (sqcdptype === 'Q') {
                if (itemname != '一次交检合格率' && itemname != '产品返工次数') {
                  return this.$message.error(`类型为【Q】时，指标只能为【一次交检合格率】或【产品返工次数】`);
                }
              }

              // if (sqcdptype === 'Q' && itemname === '一次交检合格率' && selectOrg.length >= 2) {
              //   return this.$message.error(`指标【一次交检合格率】的【组织结构】只能选至分厂级`);
              // }

              // if (sqcdptype === 'C' && itemname === '在制品批次数' && selectOrg.length >= 2) {
              //   return this.$message.error(`指标【在制品批次数】的【组织结构】只能选至分厂级`);
              // }

              // if (sqcdptype === 'D' && itemname === '计划按时完成率' && selectOrg.length >= 2) {
              //   return this.$message.error(`指标【计划按时完成率】的【组织结构】只能选至分厂级`);
              // }

              if (sqcdptype === 'P' && itemname === '培训计划完成率' && selectOrg.length >= 2) {
                return this.$message.error(`指标【培训计划完成率】的【组织结构】只能选至分厂级`);
              }

              if (sqcdptype === 'P' && itemname === '改善计划完成率' && selectOrg.length >= 2) {
                return this.$message.error(`指标【改善计划完成率】的【组织结构】只能选至分厂级`);
              }

              this.addItemObj.loading = true;
              // 新增前 先判断 是否存在相同数据
              const isExist = await this.checkIsExist({ ...this.addItemObj.addForm });
              if (isExist) {
                this.addItemObj.loading = false;
                return this.$message.error('数据已存在，不能重复添加');
              }

              const { data: { data, meta, total } } = await axios({
                method: 'POST',
                url: '../handler/report/RbAEOSItemMaint.ashx?action=insertData',
                data: {
                  type: 'insertData',
                  ...this.addItemObj.addForm
                }
              })
              this.addItemObj.loading = false;
              if (meta.status === 500) { return this.$message.error(meta.msg); }

              if (total > 0) {
                this.$message.success('新增成功');
                this.addItemObj.addDialogVisable = false;
                this.getData();
              } else {
                return this.$message.error('新增失败');
              }
            }
          });
        },
        // 切换启用状态
        async changeStatus(row) {
          const { id, status } = row;
          // 更新启用状态前确认
          const confirmResult = await this.$confirm('是否切换启用状态?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            row.status = !row.status;
            return this.$message.info('已取消切换');
          }

          const { data: { data, meta, total } } = await axios.post('../handler/report/RbAEOSItemMaint.ashx?action=changeStatus', {
            type: 'changeStatus', id, status, employeeid: getParams("uid")
          });

          if (meta.status === 500) { return this.$message.error(meta.msg); }

          if (total > 0) {
            this.$message.success('启用状态切换成功');
            this.getData();
          } else {
            return this.$message.error('启用状态切换失败');
          }
        },
        // 删除数据
        async deleteData(row) {
          const { id } = row;
          // 更新启用状态前确认
          const confirmResult = await this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            return this.$message.info('已取消删除');
          }

          const { data: { data, meta, total } } = await axios.post('../handler/report/RbAEOSItemMaint.ashx?action=deleteData', {
            type: 'deleteData', id
          });

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.$message.success('删除成功');
          this.getData();
        },
        // 修改弹窗打开
        showUpdateDialog(row) {
          this.updateItemObj.updateDialogVisable = true;
          const { factoryid, workcenterid, teamid, id, yearmonth, sqcdptype, itemname, itemnotes, unit, threshold, determine } = row;
          let selectOrg = [];
          if (teamid) {
            selectOrg = [factoryid, workcenterid, teamid];
          } else if (workcenterid && !teamid) {
            selectOrg = [factoryid, workcenterid];
          } else {
            selectOrg = [factoryid];
          }
          this.updateItemObj.updateForm = { id, yearmonth, sqcdptype, itemname, itemnotes, unit, threshold, determine, selectOrg, employeeid: getParams("uid") };
        },
        // 修改对话框[确认]按钮点击
        async updateBtnConfirm() {
          this.$refs['updateFormRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              const { sqcdptype, unit, determine, itemname, selectOrg } = this.updateItemObj.updateForm;
              if (sqcdptype === 'P') {
                if (unit !== '百分比') {
                  return this.$message.error('类型为【P】时，【单位】只能选择【百分比】');
                }
                if (determine !== '小于') {
                  return this.$message.error('类型为【P】时，【超值判断】只能选择【小于】');
                }
              }

              if (sqcdptype === 'D' && unit !== '百分比') {
                return this.$message.error('类型为【D】时，【单位】只能选择【百分比】');
              }

              if (sqcdptype === 'Q' && itemname.indexOf('率') > -1 && unit !== '百分比') {
                return this.$message.error(`指标【${itemname}】的【单位】只能选择【百分比】`);
              }

              if (sqcdptype === 'C' && unit === '百分比') {
                return this.$message.error(`指标【C】的【单位】不能选择【百分比】`);
              }

              if (sqcdptype === 'S' && itemname.indexOf('率') > -1 && unit !== '百分比') {
                return this.$message.error(`指标【${itemname}】的【单位】只能选择【百分比】`);
              }

              if (sqcdptype === 'Q') {
                if (itemname != '一次交检合格率' && itemname != '产品返工次数') {
                  return this.$message.error(`类型为【Q】时，指标只能为【一次交检合格率】或【产品返工次数】`);
                }
              }

              // if (sqcdptype === 'Q' && itemname === '一次交检合格率' && selectOrg.length >= 2) {
              //   return this.$message.error(`指标【一次交检合格率】的【组织结构】只能选至分厂级`);
              // }

              // if (sqcdptype === 'C' && itemname === '在制品批次数' && selectOrg.length >= 2) {
              //   return this.$message.error(`指标【在制品批次数】的【组织结构】只能选至分厂级`);
              // }

              // if (sqcdptype === 'D' && itemname === '计划按时完成率' && selectOrg.length >= 2) {
              //   return this.$message.error(`指标【计划按时完成率】的【组织结构】只能选至分厂级`);
              // }

              if (sqcdptype === 'P' && itemname === '培训计划完成率' && selectOrg.length >= 2) {
                return this.$message.error(`指标【培训计划完成率】的【组织结构】只能选至分厂级`);
              }

              if (sqcdptype === 'P' && itemname === '改善计划完成率' && selectOrg.length >= 2) {
                return this.$message.error(`指标【改善计划完成率】的【组织结构】只能选至分厂级`);
              }

              this.updateItemObj.loading = true;
              // 更新前 先判断 是否存在相同数据
              const isExist = await this.checkIsExist({ ...this.updateItemObj.updateForm });
              if (isExist) {
                this.updateItemObj.loading = false;
                return this.$message.error('数据已存在');
              }

              const { data: { data, meta, total } } = await axios({
                method: 'POST',
                url: '../handler/report/RbAEOSItemMaint.ashx?action=updateData',
                data: {
                  type: 'updateData',
                  ...this.updateItemObj.updateForm
                }
              })
              this.updateItemObj.loading = false;
              if (meta.status === 500) { return this.$message.error(meta.msg); }

              if (total > 0) {
                this.$message.success('更新成功');
                this.updateItemObj.updateDialogVisable = false;
                this.getData();
              } else {
                return this.$message.error('更新失败');
              }
            }
          });
        },
        // 指标每日执行情况--添加，打开弹窗
        showAddDetailDialog(row) {
          this.addDetailObj.addDetailDialogVisable = true;
          const { yearmonth, itemname, sqcdptype, orginfo, unit, threshold, determine, id } = row;
          this.addDetailObj.itemInfoObj = { yearmonth, itemname, sqcdptype, orginfo, unit, threshold, determine };
          this.addDetailObj.addDetailForm.id = id;
          this.addDetailObj.addDetailForm.createemployee = getParams("uid");//创建人
          this.addDetailObj.addDetailForm.createdate = dayjs().format('YYYY-MM-DD');
        },
        // 指标每日执行情况--添加，打开弹窗关闭后
        addDetailDialogClosed() {
          this.addDetailObj.addDetailForm = {
            id: '', description: '', improvemeasures: '', needfinishdate: '', finishdate: '',
            schedule: '', dealemployee: '', createemployee: '', containername: '', createdate: ''
          };
          this.$refs['addDetailFormRef'].resetFields();
        },
        // 指标每日执行情况--添加，[确认]按钮点击
        addDetailBtnConfirm() {
          this.$refs['addDetailFormRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              const { sqcdptype, itemname } = this.addDetailObj.itemInfoObj;
              const { schedule } = this.addDetailObj.addDetailForm;
              if (sqcdptype === 'P' && schedule === '') {
                return this.$message.error('【当前进度】不能为空');
              }
              this.addDetailObj.loading = true;
              const { data: { data, meta, total } } = await axios({
                method: 'POST',
                url: '../handler/report/RbAEOSItemMaint.ashx?action=insertDetailData',
                data: {
                  type: 'insertDetailData',
                  ...this.addDetailObj.addDetailForm
                }
              })
              this.addDetailObj.loading = false;
              if (meta.status === 500) { return this.$message.error(meta.msg); }

              if (total > 0) {
                this.$message.success('新增成功');
                this.addDetailObj.addDetailDialogVisable = false;
              } else {
                return this.$message.error('新增失败');
              }
            }
          });
        },
        // 指标每日数据明细--打开弹窗
        showItemDetailsDialog(row) {
          const { id, yearmonth, sqcdptype, itemname, orginfo } = row;
          this.itemDetails.dialogVisiable = true;
          this.itemDetails.title = `【年月：${yearmonth}】-- 【组织：${orginfo}】--【指标：${sqcdptype}】--【指标项：${itemname}】明细`;
          this.itemDetails.id = id;
          this.getItemDetailsData(id);
        },
        // 指标每日数据明细表格--查询
        async getItemDetailsData(id) {
          this.loading = true;
          this.loadingText = '数据加载中...';
          const { data: { data, meta, total } } = await axios.post('../handler/report/RbAEOSItemMaint.ashx?action=getItemDetailsData', {
            type: 'getItemDetailsData', id
          })
          this.loading = false;
          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.itemDetails.dataList = data;
        },
        // 指标每日执行情况--修改， 打开对话框
        showUpdateDetailDialog(row) {
          const { id, createdate } = row;
          const isAfter = dayjs().isAfter(createdate.split('T')[0], 'day');
          if (isAfter) {
            const employeeid = getParams("uid");
            if (this.superAdminList.indexOf(employeeid) === -1) {
              return this.$message.error('更新历史数据，请联系MES系统信息中心管理员');
            }
          }
          this.updateDetailObj.updateDetailDialogVisable = true;
          this.updateDetailObj.updateDetailForm = { ...row };
        },
        // 指标每日执行情况--修改，[确认]按钮点击
        async updateDetailBtnConfirm() {
          this.$refs['updateDetailFormRef'].validate(async (valid) => {
            if (!valid) {
              return this.$message.error('必填项不能为空!');
            } else {
              const { sqcdptype, schedule } = this.updateDetailObj.updateDetailForm;
              if (sqcdptype === 'P' && schedule === '') {
                return this.$message.error('【当前进度】不能为空');
              }
              this.updateDetailObj.loading = true;
              const { data: { data, meta, total } } = await axios({
                method: 'POST',
                url: '../handler/report/RbAEOSItemMaint.ashx?action=updateItemDetailsData',
                data: {
                  type: 'updateItemDetailsData',
                  ...this.updateDetailObj.updateDetailForm,
                  employeeid: getParams("uid")
                }
              })
              this.updateDetailObj.loading = false;
              if (meta.status === 500) { return this.$message.error(meta.msg); }

              if (total > 0) {
                this.$message.success('更新成功');
                this.updateDetailObj.updateDetailDialogVisable = false;
                this.getItemDetailsData(this.itemDetails.id);
              } else {
                return this.$message.error('更新失败');
              }
            }
          });
        },
        // 指标每日执行情况--删除
        async deleteItemDetail(row) {
          const { id, createdate } = row;
          const isAfter = dayjs().isAfter(createdate.split('T')[0], 'day');
          if (isAfter) {
            const employeeid = getParams("uid");
            if (this.superAdminList.indexOf(employeeid) === -1) {
              return this.$message.error('删除历史数据，请联系MES系统信息中心管理员');
            }
          }
          // 删除前确认
          const confirmResult = await this.$confirm('是否确认删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => err)

          // 取消切换
          if (confirmResult !== 'confirm') {
            row.status = !row.status;
            return this.$message.info('已取消删除');
          }

          const { data: { data, meta, total } } = await axios.post('../handler/report/RbAEOSItemMaint.ashx?action=deleteItemDetail', {
            type: 'deleteItemDetail', id
          });

          if (meta.status === 500) { return this.$message.error(meta.msg); }
          this.$message.success('删除成功');
          this.getItemDetailsData(this.itemDetails.id);
        },
        handleCurrentChange(newPage) {
          this.queryInfo.currentPage = newPage;
          this.getData();
        },
        handleSizeChange(newSize) {
          this.queryInfo.pageSize = newSize;
          this.getData();
        }
      },
      async mounted() {
        this.queryInfo.yearmonth = dayjs().format('YYYY-MM');
        const employeeid = getParams('uid');
        if (!employeeid) {
          this.formDisabled = true;
          return this.$notify.error({ title: '错误', message: '缺少用户信息!', duration: 0 });
        }

        // 获取用户权限白名单
        const pageurl = window.location.pathname.split('/')[3];
        const whiteList = await getUserWhiteList(pageurl, this.$message);

        if (whiteList.indexOf(employeeid) === -1) {
          this.formDisabled = true;
          return this.$notify.error({ title: '错误', message: '当前用户没有使用权限', duration: 0 });
        }

        this.getFactoryInfo();
        this.getOrginazition();
        this.getSuperAdminUsers();
      },
      watch: {
        queryInfo: { handler() { this.queryInfo.currentPage = 1 }, deep: true }
      }
    })
  </script>
</body>

</html>